<template>
  <div class="content">
    <div class="div_box">
      <div
        v-for="item in dataList"
        :key="item.id"
        :class="
          params.orgId == item.id
            ? 'change-dept-item-box2'
            : 'change-dept-item-box'
        "
        @click="handleNodeClick(item)"
      >
        <div>
          <i class="iconfont zuzhi"></i>
          <!-- <el-radio v-model="radio" label=""></el-radio> -->
        </div>
        <div>
          <div class="div_header">{{ item.orgName }}</div>
          <div v-if="item.parentName != null && item.parentName != ''" class="parentName">
            上级机构：{{ item.parentName }}
          </div>
        </div>
      </div>
    </div>

    <div slot="footer" class="dialog-footer">
      <el-button size="small" @click="closeAddDialog" class="cancel-button"
        >取 消</el-button
      >
      <el-button size="small" @click="addSubmit" class="confirm-button"
        >确 定</el-button
      >
    </div>
  </div>
</template>

<script>
import tableStyleMixin from "@mixin/table-style";
import Pagination from "@components/Pagination.vue";
import { reqOrgList, reqOrgSuperLevelInfo } from "@/api/api";
import { mapState } from "vuex";

export default {
  name: "",
  components: { Pagination },
  mixins: [tableStyleMixin],
  data() {
    return {
      dialogVisible: false,
      tableData: [],
      page: 1,
      limit: 10,
      total: 0,
      dataList: [],
      defaultProps: {
        children: "children",
        label: "orgName",
      },
      first: true, //第一次加载，点击后消除
      params: {},
      orgSupInfo: {
        orgName: "",
        nameSup: "",
        telSup: "",
        personSup: "",
        type: "",
        person: "",
        tel: "",
      },
      radio:true
    };
  },
  computed: {
    ...mapState(["user", "spacesManage"]),
  },
  watch: {},
  created() {},
  mounted() {},
  inject: ["reload"], //局部刷新
  methods: {
    getInfo() {
      this.getDataList();
      this.params.orgId = this.spacesManage.organizationInfo.orgId;
      this.params.orgName = this.spacesManage.organizationInfo.orgName;
    },
    // 查询上级组织机构信息
    async getOrgSuperLevelInfo(parentId) {
      const res = await reqOrgSuperLevelInfo(parentId);
      console.log("查询上级组织机构信息", res);
      this.orgSupInfo = res.data.row;
      console.log(this.orgSupInfo);
    },
    handleNodeClick(data) {
      // console.log(data,'data');
      let typeName = "";
      if (data.type == "1") {
        typeName = "联网单位";
      } else if (data.type == "2") {
        typeName = "维保单位";
      } else if (data.type == "3") {
        typeName = "监管单位";
      } else if (data.type == "4") {
        typeName = "经销商";
      } else if (data.type == "5") {
        typeName = "工程商";
      } else if (data.type == "6") {
        typeName = "代理商";
      }
      this.params = {
        orgId: data.id,
        orgName: data.orgName,
        mobile: data.mobile,
        username: data.username,
        typeName: typeName,
        parentId:data.parentId,
      };
      // this.$store.commit("saveOrganizationInfo", params); //保存信息，使页面刷新信息还存在
      // this.reload(); //局部刷新
    },
    // 点击确定修改密码
    async addSubmit() {
      this.$store.commit("saveOrganizationInfo", this.params); //保存信息，使页面刷新信息还存在
      this.$modal.notifySuccess("切换机构成功");
      this.reload(); //局部刷新
    },
    // 树节点懒加载
    async loadNode(node, resolve) {
      console.log("loadNode", node);
      if (node.level == 0) {
        // 如果是一级单位
        let params = {
          tenantId: this.user.tenantId,
          userId: this.user.userId,
          roleName: this.user.roleName,
          orgName: this.orgName,
        };
        let res = await reqOrgList( params);
        if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
        let { rows, total } = res.data;
        rows.forEach((item) => {
          if (item.hasChildren === 1) {
            item.hasChildren = false;
          } else {
            item.hasChildren = true;
          }
        });
        if (rows.length > 0) {
          let data = {
            orgId: rows[0].id,
            orgName: rows[0].orgName,
            role: rows[0].role,
          };
          console.log("组件data", rows[0]);
          //   this.$emit("toggleOrgId", rows[0]);
        } else {
          // 组织机构筛选为空时
          let data = {
            orgId: "",
            orgName: "",
            role: 2,
          };
          this.$emit("toggleOrgId", data);
        }
        return resolve(rows);
      } else {
        // 否则是下级单位
        let params = {
          tenantId: this.user.tenantId,
          userId: this.user.userId,
          roleName: this.user.roleName,
          orgName: this.orgName,
          parentId: node.data.id,
        };
        let res = await reqOrgList( params);
        if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
        let rows = res.data.rows;
        rows.forEach((item) => {
          if (item.hasChildren === 1) {
            item.hasChildren = false;
          } else {
            item.hasChildren = true;
          }
        });
        return resolve(rows);
      }
    },
    // 获取列表
    async getDataList() {
      let params = {
        tenantId: this.user.tenantId,
        userId: this.user.userId,
        roleName: this.user.roleName,
        orgName: this.orgName,
      };
      let res = await reqOrgList( params);
      // console.log(res, "res222");
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      let { rows, total } = res.data;
      let unitTree = [];
      rows.forEach((item) => {
        if (item.hasChildren === 1) {
          item.hasChildren = false;
        } else {
          item.hasChildren = true;
        }
        unitTree.push({
          orgName: item.orgName,
          children: [],
          id: item.id,
          hasChildren: item.hasChildren,
          level: item.level,
          parentId: item.parentId,
          type: item.type,
          mobile: item.mobile,
          username: item.username,
          parentId:item.parentId,
          parentName:item.parentName,
        });
      });
      // console.log(unitTree, "unitTree");
      this.dataList = unitTree;
      // this.getOrgSuperLevelInfo(this.dataList[0].parentId);
      // let data = {
      //         orgId: rows[0].id,
      //         orgName: rows[0].orgName,
      //         role: rows[0].role,
      //       };
      // this.$store.commit("saveOrganizationInfo", data); //保存信息，使页面刷新信息还存在
      // this.$emit("toggleOrgId", data);
    },
    // 点击关闭弹框
    closeAddDialog() {
      this.$emit("closeAddDialog");
    },
  },
};
</script>

<style scoped lang="less">
.div_box {
  max-height: 50vh;
  width: 100%;
  color: @primaryContentTxt;
  // margin-top: 15px;
  overflow: auto;

  .change-dept-item-box {
    height: 62px;
    width: 100%;
    padding: 15px;
    box-sizing: border-box;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    cursor: pointer;
    margin-bottom: 10px;
    border: 1px solid @primaryBorderColor6;
    border-radius: 0.375rem;
  }

  .change-dept-item-box2 {
    color: @primaryTxtcolor2;
    width: 100%;
    height: 62px;
    padding: 15px;
    box-sizing: border-box;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    cursor: pointer;
    margin-bottom: 10px;
    border: 2px solid #7367f0;
    border-radius: 0.375rem;
  }
  .zuzhi {
    margin-right: 15px;
    font-size: 20px;
  }
  .div_header {
    font-size: 15px;
  }
  .parentName {
    margin-top: 5px;
    font-size: 12px;
  }
}
.dialog-footer {
  text-align: right;
}
.content {
  margin-left: 10px;
  height: 500px;
}
// 单选按钮
::v-deep .el-radio {
  color: @primaryThemeTxtColor2;
}
::v-deep .el-radio__input.is-checked + .el-radio__label {
  color: #7367f0;
}
::v-deep .el-radio__input.is-checked .el-radio__inner {
  border-color: #7367f0;
  background: #7367f0;
}
</style>
